<template>
  <div>
    <a-modal title="中药" :width="500" :visible="visible" @ok="submit" @cancel="cancelAdd">
      <a-form :form="form">
        <!--        <a-form-item label="中药">
          {{selmedicine.name}}
          <a-button v-decorator="['chinesedrugid',{ rules: [{ required: true, message: '请输选择中药' }] }]" type="primary"
            @click="chooseMedicine">选择</a-button>
        </a-form-item> -->
        <a-form-item label="名称">
          <a-input v-decorator="['name',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
        </a-form-item>
        <a-form-item label="拼音首字母">
          <a-input v-decorator="['pinyin',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title="选择中药" :width="1000" :visible="cvisible" @ok="submit" @cancel="cvisible=false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="名称">
                <a-input allow-clear placeholder="请输入名称" v-model="queryParam.name" />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearch">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table size='small' :scroll="{ x: true }" ref="table" @change="tablePaginationChange" :pagination="pagination"
        bordered :dataSource="dataSource" :columns="columns" :rowKey="(record,index)=> index">
        <div slot-scope="text, record" slot="image" style="display: flex;flex-wrap:wrap;">
          <img @click="previewImg(item)" v-for="(item,index) in record.image.split(',')" :key='index' class="banner-img"
            style="margin: 10px;" :src="item" />
        </div>
        <div slot="action" slot-scope="text, record" href="javascript:;">
          <a-button size='small' type="link" @click="chooseInfo(record)">
            选择
          </a-button>
        </div>
      </a-table>
    </a-modal>
    <imgBox ref='preimg'></imgBox>
  </div>
</template>

<script>
  import {
    medicineType,
    chineseMedicineAdd,
    chineseMedicineUpdate,
    chineseMedicineAll
  } from '@/api/medicine'
  import imgBox from '@/components/previewImg/index'
  import {
    getFormData
  } from '@/utils/aliOss/aliossUpload.js'
  import aliOssConfig from '@/utils/aliOss/config'


  const formItemLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 8
    },
  };
  const formTailLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 8,
      offset: 4
    },
  };

  export default {
    components: {
      imgBox
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
      }
    },
    data() {
      return {
        shibie: '',
        fileList: [],
        checkNick: false,
        formItemLayout,
        formTailLayout,
        form: this.$form.createForm(this),
        loading: false,
        imageUrl: '',
        formData: {},
        aliOssConfig: aliOssConfig,
        id: 0,
        updateflag: false,
        typeList: [],
        selmedicine: '',

        // 中药列表
        cvisible: false,
        pagination: {
          current: 1, //默认当前叶数
          total: 0, // 数据总数 如果不设置就以绑定的数据量为准
          pageSize: 10, // 默认每页条数
          showSizeChanger: true, //是否可以改变 pageSize
          pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
          showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
          hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
        },
        queryParam: {
          name: '',
        },
        searchflag: false,
        dataSource: [],
        columns: [{
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            width: 100,
          },
          {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            ellipsis: true,
          },

          {
            title: '拼音',
            dataIndex: 'pinyin',
            key: 'pinyin',
            ellipsis: true,
          },
          {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 190,
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
      };
    },
    created() {
      // this.getType()
    },
    methods: {
      chooseInfo(val) {
        this.selmedicine = val
        this.cvisible = false
        let values = this.form.getFieldsValue();
        values.chinesedrugid = val.id
        this.form.setFieldsValue(values);
      },
      getType() {
        medicineType().then(res => {
          this.typeList = res.data
        })
      },
      previewImg(img) {
        this.$refs.preimg.initData(img)
      },
      //选择中药
      chooseMedicine() {
        this.cvisible = true
        this.getMedicineList()
      },
      handleSearch() {
        this.pagination.current = 1
        this.searchflag = true
        this.getMedicineList()
      },
      resetSearch() {
        this.pagination.current = 1
        this.searchflag = false
        this.queryParam = {
          name: '',
        }
        this.getMedicineList()
      },
      tablePaginationChange(e) {
        this.pagination = e
        this.getList()
      },
      getMedicineList() {
        let data = {
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize,
        }
        if (this.searchflag) {
          data = {
            pageNo: this.pagination.current,
            pageSize: this.pagination.pageSize,
            ...this.queryParam
          }
        }
        chineseMedicineAll(data).then(res => {
          this.pagination.total = res.data.totalCount
          this.dataSource = res.data.data
        })
      },
      cancelAdd() {
        this.updateflag = false
        this.$emit('cancel', true)
        this.form.resetFields()
        this.$emit('addCancel')
      },
      setUpdate(formValue) {
        let data = {
          chinesedrugid: formValue.id,
          name: formValue.name,
          pinyin: formValue.pinyin,
        }
        console.log(data)
        this.selmedicine = {
          name: formValue.name
        }
        var that = this
        that.form.setFieldsValue({
          ...data
        })
        this.id = formValue.id
        this.updateflag = true
      },
      submit() {
        var that = this
        const {
          form: {
            validateFields
          },
        } = this

        validateFields((errors, values) => {
          if (!errors) {
            // values.chinesedrugid = parseInt(values.chinesedrugid)
            // values.pharmacyid = parseInt(this.$store.getters.id)
            // values.inventory = parseInt(values.inventory)
            // values.supplyprice = parseFloat(values.supplyprice)
            if (this.updateflag) {
              values.id = this.id
              chineseMedicineUpdate({
                ...values,
              }).then((res) => {
                if (res.code == 0) {
                  that.form.resetFields()
                  that.$emit('ok')
                }
              })
            } else {
              chineseMedicineAdd({
                ...values,
              }).then((res) => {
                if (res.code == 0) {
                  that.form.resetFields()
                  that.$emit('ok')
                }
              })
            }
          }
        })
      },
    },
  };
</script>
<style scoped>
  .banner-img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>